<!-- 通讯录 -->
<template>
	<view>
		<view class="addressBookTitle" :style="'padding-top:'+safeArea+'px'">
			<u-icon name="arrow-left" color="#ffffff" :size="23" @click="backStep"></u-icon>
			<text class="uni-page-head__title">通讯录</text>
			<view style="width: 27px;"></view>
		</view>
		<u-sticky bgColor="#fff" class="sticky" :customNavHeight="height">
			<view class="input">
				<view @click="onSearch">
					<u--input
						:disabled="true"
						placeholder="请输入姓名/手机号"
						border="null"
						prefixIcon="search"
						prefixIconStyle="font-size: 44rpx;color: #C5C2C6"
						:customStyle="{background: '#FBF8FB'}"
						v-model="form.name"
					></u--input>
				</view>
				<template v-if="stepsList && stepsList.length && stepsList.length>1">
					<steps :item="itemDetail" :stepsList="stepsList" @click="onSteps"></steps>
				</template>
			</view>
		</u-sticky>
		<!-- #ifdef APP-PLUS -->
		<view style="height: 40px;"></view>
		<!-- #endif -->
		
		<!-- 树结构 -->
		<view class="cell" :border="false">
			<u-cell-group v-if="showTreeList && showTreeList.length">
				<u-cell :isLink="item.isShow?false: true" rightIconStyle="color:#C8C5C8" v-for="(item,index) in showTreeList" @click="onDetail(item, index)" :key="index">
					<view slot="title">
						<text class="cell-title-text">{{item.departName}}</text>
						<text class="cell-num" v-if="item.personCount">（{{item.personCount}}）</text>
					</view>
				</u-cell>
			</u-cell-group>
		</view>
		
		<!-- 通讯录 -->
		<view class="cell" style="margin-top: 15px;" :border="false" v-if="addressBook && addressBook.length">
			<u-cell-group>
				<u-cell rightIconStyle="color:#C8C5C8" center :arrow="false" @click="onPhone(item)" v-for="(item,index) in addressBook" :key="index">
					<view class="left-icon" slot="icon">
						<u-avatar :src="imageUrl(item.avatar)" shape="square" mode="aspectFill"></u-avatar>
					</view>
					<view slot="title">
						<span class="cell-title">{{item.realname}}</span>
						<span class="cell-value" style="margin-left: 10px;">
							{{item.phone}}
						</span>
					</view>
					<view slot="label" class="cell-describe">
						{{item.departName}}({{item.levelPostName}})
					</view>
					<view class="cell-right-icon" slot="right-icon">
						<image src="@/static/addressBook/phone_icon.png" mode="aspectFill"></image>
					</view>
				</u-cell>
			</u-cell-group>
			<u-loadmore margin-top="20" style="padding-bottom: 40rpx;" v-if="addressBook && addressBook.length && isShow" :status="status" />
			
		</view>
		<template v-if="isShowEmpty">
			<u-empty
				v-if="!isShow"
				margin-top="140"
				mode="data"
				text="~ 暂无相关数据 ~"
				icon="/static/empty/data.png"
			>
			</u-empty>
		</template>
		
		<!-- 弹出层 -->
		<u-action-sheet :actions="listAction" @select="clickAction" :show="showAction" ></u-action-sheet>
		<!-- 权限告知弹窗 -->
		<yk-authpup ref="authpup" type="top" @changeAuth="changeAuth" :permissionID="permissionID"></yk-authpup>
	</view>
</template>

<script>
	import ykAuthpup from "@/components/yk-authpup/yk-authpup";
	import steps from '@/pages/addressBook/components/steps.vue'
	import {imageUrl} from '@/utils/common.js'
	import {
		queryTreeList ,// 树结构
		queryByOrgCodeForAddressList, // 通讯录
	} from '@/api/index.js'
	export default {
		components: {
			ykAuthpup,
			steps
		},
		data() {
			return {
				imageUrl: imageUrl,
				safeArea: 0,
				height: 37,
				showAction: false, // 弹出层控制开关
				phoneInfo: '', // 点击选择的电话号码
				listAction: [
					{
						name:'拨打电话',
						code: 'callPhone'
					},
					{
						name: '复制',
						code: 'copy'
					},
					{
						name: '存储到本地通讯录',
						code: 'storage'
						
					},
					{
						name: '取消',
						code: 'cancel'
					}
				],
				code: '',
				isShowEmpty: false, // 是否展示空白页
				form:{
					name: ''
				},
				status: 'loadmore',
				itemDetail: '', // 点击的信息
				treeList: [],
				showTreeList: [],
				stepsList: [], // 步骤条
				addressBook: [], // 通讯录
				page: {
					pageNo: 1,
					pageSize: 20,
				},
				isBottom: true,
				isShow: true ,// 是否显示空白页
				isQuery: 0, // 是否查询本部下面的通讯录
				bookIndex:0,
				permissionID: '', // 权限
			}
		},
		onLoad() {
			uni.hideTabBar()
		},
		created() {
			uni.getSystemInfo({
				success(e) {
					uni.setStorageSync('getSystemInfo', e);
				}
			})
			this.safeArea = uni.getStorageSync('getSystemInfo').safeArea.top
			this.height = this.safeArea + 37
		},
		onShow() {
			this.form ={
				name: ''
			},
			this.isQuery = 0
			this.status = 'loadmore'
			this.itemDetail = '' // 点击的信息
			this.treeList = []
			this.showTreeList  = []
			this.stepsList = [] // 步骤条
			this.addressBook = [] // 通讯录
			this.page = {
				pageNo: 1,
				pageSize: 20,
			}
			this.isBottom = true
			this.isShow = true // 是否显示空白页
			this.getQueryTreeList() // 树结构
		},
		methods: {
			// 查询树结构
			getQueryTreeList () {
				queryTreeList().then(res => {
					if (res.success) {
						this.treeList = res.result[0].children
						
						this.treeList.unshift({
							departName: res.result[0].departName,
							personCount: res.result[0].personCount,
							isShow: true
						})
						this.showTreeList = this.treeList
						this.stepsList = []
						this.stepsList.push({
							title: res.result[0].departName,
							index: 0,
							item: ''
						})
					}
					
				}).catch(res => {
					//联网失败, 结束加载
					// this.mescroll.endErr();
				})
			},
			
			// 查询通讯录
			getAddressBook (item) {
				this.status = 'loading';
				var params = {
					orgCode: item.orgCode || '',
					column: 'createTime',
					order: 'desc',
					pageNo: this.page.pageNo,
					pageSize: 20,
					realname: this.form.name,
					isAll:1
				}
				queryByOrgCodeForAddressList(params).then(res => {
					if (res.success) {
						if (this.page.pageNo ==1 && (!res.result.records || !res.result.records.length)) this.isShow = false
						const _data = res.result.records || [];
						if (_data.length < this.page.pageSize) {
							this.status = 'nomore';
							this.isBottom = true;
						} else if (_data.length >= this.page.pageSize) {
							this.status = 'loadmore';
							this.isBottom = false;
						}
						this.addressBook =this.addressBook.concat(res.result.records)
					}
					
				}).catch(res => {
					
					//联网失败, 结束加载
					// this.mescroll.endErr();
				})
			},
			
			onDetail (item, index) {
				this.bookIndex = index
				if (item.isShow) {
					return false
				}
				if (item.children && item.children.length) {
					this.showTreeList = item.children
					this.isShowEmpty = false
				} else {
					this.showTreeList = []
					this.isShow = true
					this.isShowEmpty = true
				}
				
				this.status = 'loadmore';
				this.page = {
					pageNo: 1,
					pageSize: 20,
				}
				this.addressBook = []
				this.getAddressBook(item)
				this.stepsList.push({
					title: item.departName,
					index: index,
					item: item
				})
				this.itemDetail = item
			},
			
			onSteps (item, index) {
				if (index+1 == this.stepsList.length) {
					return false
				}
				this.addressBook = []
				this.isShow = true
				this.status = 'loadmore';
				this.page = {
					pageNo: 1,
					pageSize: 20,
				}
				this.isShowEmpty = false
				this.getAddressBook(item.item)
				
				if (index == 0 ) {
					this.showTreeList = this.treeList
				} else if (index == 1) {
					this.showTreeList = this.treeList[item.index].children
				} else if (index == 2) {
					this.showTreeList = this.treeList[1].children[item.index].children
				} else if (index == 3) {
					this.showTreeList = this.treeList[1].children[2].children[item.index].children
				}
				this.stepsList.splice(index+1,this.stepsList.length-1)
			},
			
			// 点击拨打电话
			onPhone (item) {
				this.showAction = true
				this.phoneInfo = item
			},
			openAuth(){
					this.$refs['authpup'].open() //调起自定义权限目的弹框,具体可看示例里面很详细
			},
			//用户授权权限后的回调
			changeAuth(){
				let _this = this
				if (this.code == 'callPhone') { // 拨打电话
					// #ifdef APP-PLUS
					uni.makePhoneCall({
						phoneNumber:_this.phoneInfo.phone,
						fail() {
							uni.showToast({
								title: '拨打电话失败',
								icon: 'none'
							})
						}
					})
					// #endif
					// #ifndef APP-PLUS
					uni.showToast({
						title: '暂无此功能',
						icon: 'none'
					})
					// #endif
				} else if (this.code == 'storage') { //存储到通讯录
				// #ifdef APP-PLUS
				uni.addPhoneContact({
					firstName: _this.phoneInfo.realname,
					mobilePhoneNumber: _this.phoneInfo.phone,
					success() {
						uni.showToast({
							title: '存储到通讯录成功',
							icon: 'none'
						})
					},
					fail (fail) {
						uni.showToast({
							title: '存储到通讯录失败',
							icon: 'none'
						})
					}
				});
				// #endif
				// #ifndef APP-PLUS
				uni.showToast({
					title: '暂无此功能',
					icon: 'none'
				})
				// #endif
				}
			},
			// 点击弹窗选择
			clickAction (item) {
				let _this = this
				this.code = item.code
				if (item.code == 'callPhone') { // 拨打电话
					// #ifdef APP-PLUS
					this.permissionID='CALL_PHONE'
					this.$nextTick(() => {
						_this.openAuth()
					})
					// #endif
					// #ifndef APP-PLUS
					uni.showToast({
						title: '暂无此功能',
						icon: 'none'
					})
					// #endif
				} else if (item.code == 'copy') { // 复制
					
					uni.setClipboardData({
					  data: _this.phoneInfo.phone,
						showToast: false,
					  success: function() {
							uni.showToast({
								title:'复制成功',
								icon: 'none'
							})
					  }
					})
				} else if (item.code == 'storage') { //存储到通讯录
				// #ifdef APP-PLUS
				this.permissionID='READ_CONTACTS'
				this.$nextTick(() => {
					_this.openAuth()
				})
				// #endif
				// #ifndef APP-PLUS
				uni.showToast({
					title: '暂无此功能',
					icon: 'none'
				})
				// #endif
				}
				this.showAction = false
			},
			
			// input点击确定
			onSearch () {
				uni.navigateTo({
					url:'/pages/addressBook/addressBookDetail'
				})
			},
			// 返回上一级目录
			backStep(){
				if(this.stepsList?.length >= 2) {
					this.onSteps(this.stepsList[this.stepsList.length-2],this.stepsList.length-2)
				}else {
					uni.reLaunch({
						url: '/pages/home/home'
					})
				}
				
			},
		},
		onReachBottom() {
			if (this.isBottom) return;
			this.page.pageNo++
			this.getAddressBook(this.itemDetail)
			
		}
	}
</script>

<style lang="scss" scoped>
.addressBookTitle {
	position: fixed;
	top: 0;
	left: 0;
	background-color: rgb(30, 111, 255);
	color: rgb(255, 255, 255);
	padding: 7px 6px;
	width: 100%;
	z-index: 998;
	display: flex;
	justify-content: space-between;
	box-sizing:border-box;
	.uni-page-head__title {
		font-size: 16px;
		font-weight: 700;
		line-height: 30px;
		text-align: center;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		max-width: 260px;
	}
	
}
.sticky{
	padding: 20rpx 60rpx;
}
.cell{
	margin-top: 54px;
	background-color: #ffffff;
	box-shadow: 0px 4rpx 20rpx 0px rgba(0,0,0,0.05);
	.left-icon{
		width: 40px;
		height: 40px;
		margin-right: 10px;
		image{
			width: 40px;
			height: 40px;
			border-radius: 5px;
		}
	}
	.cell-title{
		font-size: 16px;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		// width: 320rpx;
		color: #8799a3;
		overflow: hidden; /*超出隐藏*/
		text-overflow: ellipsis;/*隐藏后添加省略号*/
		white-space: nowrap;/*强制不换行*/
	}
	.cell-describe{
		font-size: 14px;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #7F7F7F;
		width: 100%;
		// width: 320rpx;
		// overflow: hidden; /*超出隐藏*/
		// text-overflow: ellipsis;/*隐藏后添加省略号*/
		// white-space: nowrap;/*强制不换行*/
	}
	.cell-value{
		font-size: 16px;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #7F7F7F;
	}
	.cell-right-icon{
		width: 20px;
		height: 20px;
		image{
			width: 20px;
			height: 20px;
		}
	}
	.cell-title-text{
		font-size: 16px;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #8799a3;
	}
	.cell-num{
		font-size: 16px;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #B2B2B2;
	}
}
</style>
